<template>
  <div id="goods-box">
    <div class="search-box">
      <el-form :inline="true" :model="selectData" class="demo-form-inline">
        <el-form-item label="标题">
          <el-input v-model="selectData.title" placeholder="请输入关键字" />
        </el-form-item>
        <el-form-item label="详情">
          <el-input v-model="selectData.introduce" placeholder="请输入关键字" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-containe">
      <el-table :data="dataList.comList" border style="width: 100%">
        <el-table-column prop="id" label="ID" width="180" />
        <el-table-column prop="title" label="标题" width="180" />
        <el-table-column prop="introduce" label="详情" />
      </el-table>
    </div>
    <div class="page-box">
      <el-pagination @current-change="currentChange" @size-change="sizeChange"	 small background layout="prev, pager, next" :total="selectData.count*2" class="mt-4" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, reactive, watch,onMounted } from "vue";
import { getGoodsList } from "../../../request/api";
import { InitData, ListIlk } from "../../../type/goodsView";

const data = reactive(new InitData());
const selectData = data.selectInitData;
/** 声明一个数组来存储初始的值 */
let newData:ListIlk[] = [];

onMounted( ()=> {
  getGoodsList().then(
  (res) => {
    data.list = res.data;
    newData = res.data;
    selectData.count = res.data.length;
  },
  (err) => {
    throw new Error(err);
  }
);
})

const currentChange = (page: number) => {
  selectData.page = page;
}
const dataList = reactive({
  comList: computed(() => {
    return data.list.slice((selectData.page - 1) * selectData.pageSize, selectData.page * selectData.pageSize);
  })
});

const sizeChange = (size: number) => {
  selectData.pageSize = size;
}

/** 查询数据  */
const onSubmit = () => {
  let arr:ListIlk[] = [];

  if (selectData.title || selectData.introduce) {
    if (selectData.title) {
      arr = data.list.filter(v => v.title.indexOf(selectData.title) != -1 )
    }
     if (selectData.introduce) {
      arr = data.list.filter(v => v.introduce.indexOf(selectData.introduce) != -1 )
    }
  } else {
    arr = data.list;
  }
  selectData.count = arr.length;
  data.list = arr;
};
/** 监听俩个input的值情况 */
watch([()=> selectData.title, ()=> selectData.introduce], () => {
  if (selectData.title === '' && selectData.introduce === '') {
    data.list = newData;
    selectData.count = newData.length;
  }
})
</script>

<style lang="less" scoped>
#goods-box {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;

  .table-containe {
    widows: 100%;
    height: 520px;
    overflow: auto;
  }

  .page-box, .search-box {
    width: 100%;
    display: flex;
    justify-content: center;
  }
  .page-box {
    margin-top: 10px;
    position: absolute;
    bottom: 0;
  }

}
</style>